<template>
  <div>
    <!-- 
        :closable="item.name === '首页' ? false : ''" 
        size:标签的大小
        closable：标签是否可关闭
          :class="{active:isShow}"
        
        判断菜单名是否为首页，是的话就不可关闭
    -->
    <el-tag
      class="tagitem"
      size="medium"
      :effect="$route.path===item.path?'dark':'light'"
      :closable="item.name === '首页' ? false : ''"
      v-for="item,index in tags"
      :key="index"
      @close="closeTag(index)"
      @click="go(index)"
    >{{item.name}}</el-tag>
  </div>
</template>

<script>
// import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      tags: [{ name: "首页", path: "/" }],
    };
  },
  methods: {
    closeTag(index) {
      this.tags.splice(index, 1);
    },
    // 根据菜单标签跳转到对应的路径
    go(index) {
      // this.$router.push路由添加
      // this.tags[index].path.path通过下标获取到具体路径
      this.$router.push(this.tags[index].path);
    },
  },
  watch: {
    $route: {
      // 刷新页面时立即监听
      immediate: true,
      handler(newVal, oldVal) {
        // 当前路由：this.$route
        // 当前路由中有元信息meta，用于存放当前路由相关的数据
        // console.log(this.$route.meta.titles[1])
        let newtag = {
          // 要添加到标签上的子菜单名
          // this.$route.meta=点击时候的该路径
          // 需要的子菜单在这个路径对象中的第二个元素中
          // [this.$route.meta.titles.length-1]使用长度-1获取到该数据的下标，从下标获取到该数据
          name: this.$route.meta.title[this.$route.meta.title.length - 1],
          // 获取到点击菜单的路径
          path: this.$route.fullPath,
        };
        console.log(this.$route);

        // 方法一：
        // 通过序列化统一对象和数组的格式进行判断————会产生添加完成后再次点击首页添加一个首页的情况
        // 不是重复的就进行添加，重复的对象就返回
        // if (!JSON.stringify(this.tags).includes(JSON.stringify(newtag))) {
        //   // 将新增的对象添加到原来带有默认值的对象中
        //   this.tags.push(newtag);
        //   // console.log(this.tags.push(newtag));
        // }

        // 方法二：开关思想去重
        let flag = true;
        this.tags.forEach((item) => {
          if (item.name == newtag.name) {
            flag = false;
          }
        });
        if (flag) {
          this.tags.push(newtag);
        }
      },
    },
  },
};
</script>

<style lang = "less" scoped>
.tagitem {
  margin-right: 5px;
  font-size: 14px;
  /* &.active {
    background-color: #409eff;
    border-color: #409eff;
  } */
}
</style>